<!-- 商品列表 -->
<template>
  <div class="goods-list">
    <div class="goods-list-box">
      <div class="header">
        <el-tabs v-model="currentIndex" @tab-click="changeStatus">
          <el-tab-pane :label="v.name" v-for="v in statusPanel" :key="v.status" :name="v.status">
            <GoodsList :status="v.status" />
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import GoodsList from "@/components/goodlist";
export default {
  components: {
    GoodsList
  },
  data() {
    return {
      currentIndex: "3",
      prevIndex: 3,
      statusPanel: [
        {
          name: "全部商品",
          status: "3"
        },
        {
          name: "出售中",
          status: "0"
        },
        {
          name: "已售罄",
          status: "1"
        },
        {
          name: "已下架",
          status: "2"
        }
      ]
    };
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    },
    changeStatus() {
      if (this.currentIndex == this.prevIndex) return
      // 加载数据
    }
  }
};
</script>

<style scoped lang="less">
.goods-list {
  .goods-list-box {
    background: #fff;
    .header {
      position: relative;
      height: 42px;
      line-height: 42px;
      // padding: 0 15px;
      color: #333;
      font-size: 14px;
      .el-tabs {
        /deep/.el-tabs__header {
          padding: 0 15px;
          margin: 0;
        }
      }
    }
  }
}
</style>

